<template>
  <el-container class="container">
    <el-header class="headerShadow">
      <header-common></header-common>
    </el-header>
    <el-container>
      <el-aside  width="200px">
        <side-bar v-model="tabIndex"></side-bar>
      </el-aside>
      <GMap :tabIndex = 'tabIndex' v-if="tabIndex === '2d' || tabIndex === '3d'"></GMap>
      <batch-manage v-if="tabIndex === 'batchManage'"></batch-manage>
      <batch-logo-manage v-if="tabIndex === 'batchLogoManage'"></batch-logo-manage>
    </el-container>
  </el-container>
</template>
<script>
import GMap from './components/map'
import BatchManage from './components/batchManage'
import BatchLogoManage from './components/batchLogoManage'
export default {
  name: 'MapPlatform',
  data () {
    return {
      tabIndex: '2d'
    }
  },
  components: {
    GMap,
    BatchManage,
    BatchLogoManage
  },
  mounted() {
  }
}
</script>
<style lang="less">
  .headerShadow {
    z-index: 9;
    box-shadow: 0px 3px 16px -4px #000;
    -webkit-box-shadow: 0px 3px 16px -4px #000;
    -moz-box-shadow: 0px 3px 16px -4px #000;
  }
  .linkWrap {
    position: absolute;
    z-index: 9999;
    left: 35%;
    top: 30%;
    background-color: #eee;
    padding: 38px 0 20px 30px;
    border: 2px solid #00ffff;
    .iconClose {
      position: absolute;
      top: 0;
      right: 20px;
      width: 20px;
      cursor: pointer;
      font-size: 38px;
      line-height: 38px;
      color: #088eec;
    }
  }
</style>
